<!-- 分类 -->
<template>
	<view class="page-container">
		<view class="trend-wrapper" v-for="item in trendList" :key="item.id">
      <view class="user-info u-flex">
        <image class="avatar" :src="item.avatar" />
        <view class="title-section">
          <view class="title">{{item.title}}</view>
          <view class="sub-title">{{item.subTitle}}</view>
        </view>
      </view>
      <view class="content">{{item.content}}</view>
      <view class="image-section u-flex">
        <image class="img" :src="img" v-for="(img, index) in item.images" :key="index" />
      </view>
      <view class="action-section u-flex">
        <view class="share u-flex-1" @tap="handleShare()">
          <u-icon name="share"></u-icon>分享
        </view>
        <view class="like">
          <u-icon name="thumb-up"></u-icon>{{item.likes}}
        </view>
        <view class="comment">
          <u-icon name="chat"></u-icon>{{item.comments}}
        </view>
      </view>
    </view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			trendList: [
        {
          id: 1,
          avatar: '/static/images/test/avatar.jpg',
          title: 'Merlin',
          subTitle: 'test sub-title',
          content: '【#军强则国安#！今天，八一建军节，发条微博，致最可爱的人！[心]】他们在，安全感就在！#致敬人民子弟兵#，永远相信人民子弟兵！',
          images: [
            '/static/images/test/img.jpg',
            '/static/images/test/img.jpg',
            '/static/images/test/img.jpg'
          ],
          likes: 134,
          comments: 0,
        },
        {
          id: 2,
          avatar: '/static/images/test/avatar.jpg',
          title: 'Merlin',
          subTitle: 'test sub-title',
          content: '【#军强则国安#！今天，八一建军节，发条微博，致最可爱的人！[心]】他们在，安全感就在！#致敬人民子弟兵#，永远相信人民子弟兵！',
          images: [
            '/static/images/test/img.jpg',
            '/static/images/test/img.jpg',
            '/static/images/test/img.jpg'
          ],
          likes: 134,
          comments: 0,
        }
      ],
		};
	},
	methods: {
		handleShare() {},
    handleLike() {},
    handleComment() {},
	}
};
</script>

<style lang="scss">
.page-container {
  background: #F8F8F8;
  height: 100vh;
  
  .trend-wrapper {
    margin: 16rpx;
    padding: 32rpx 24rpx;
    background: #fff;
    
    .user-info {
      margin-bottom: 16rpx;
      
      .avatar {
        margin-right: 16rpx;
        width: 68rpx;
        height: 68rpx;
        border-radius: 50%;
      }
      
      .title-section {
        font-weight: 500;
        color: #666666;
        
        .title {
          font-size: 28rpx;
          line-height: 40rpx;
        }
        
        .sub-title {
          font-size: 20rpx;
          line-height: 28rpx;
        }
      }
    }
    
    .content {
      margin-bottom: 16rpx;
      font-size: 28rpx;
      color: #333333;
      line-height: 40rpx;
    }
    
    .image-section {
      margin-bottom: 36rpx;
      
      .img {
        width: 220rpx;
        height: 220rpx;
        margin-right: 8rpx;
        
        &:nth-child(3) {
          margin-right: 0;
        }
      }
    }
    
    .action-section {
      font-size: 20rpx;
      font-weight: 500;
      color: #666666;
      line-height: 28rpx;
      
      .u-icon {
        font-size: 20rpx;
        margin-right: 10rpx;
      }
      
      .like {
        margin-right: 40rpx;
      }
    }
  }
}
</style>
